<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>07CSS方式处理图片</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#oneImg {
				width: 900px;
			}
			
		</style>
	</head>
	<body>
		<div style="text-align: center;">
			<img src="img/banner3.png" id="oneImg" alt=""/>
		</div>
		<div style="text-align: center;">
			<input type="button" id="mohu" value="高斯模糊" />
			<input type="button" id="fugu" value="复古" />
			<input type="button" id="baohe" value="饱和色" />
		</div>
	</body>
	<script type="text/javascript">
		var img = document.getElementById("oneImg");
		var mohu = document.getElementById("mohu");
		var fugu = document.getElementById("fugu");
		var baohe = document.getElementById("baohe");
		
		// 高斯模糊
		mohu.onclick = function() {
			// 模糊半径越大越模糊
			img.style.filter = "blur(5px)";
			// 兼容性处理
			img.style.webkitFilter = "blur(5px)";
		}
		
		// 复古
		fugu.onclick = function() {
			// 值越大程度越高
			img.style.filter = "sepia(90%)";
			img.style.webkitFilter = "sepia(90%)";
		}
		
		// 饱和
		baohe.onclick = function() {
			// 值越大饱和度越高
			img.style.filter = "saturate(200%)";
			img.style.webkitFilter = "saturate(200%)";
		}
		
		
	</script>
</html>
